<template>
  <div>
    <mt-header title="登录">
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
      <router-link to="/register" slot="right">新用户</router-link>
    </mt-header>

    <!-- 表单 -->
    <mt-field
      label="用户名"
      placeholder="请输入用户名"
      v-model="name"
      @blur.native.capture="checkName"
      :state="nameSate"
    ></mt-field>

    <mt-field
      v-model="pwd"
      :state="pwdState"
      label="密码"
      placeholder="请输入密码"
      type="password"
      @blur.native.capture="checkPwd"
    ></mt-field>

    <mt-button @click="checkFrom" type="primary" size="large">登录</mt-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "", //绑定用户名
      nameSate: "", //绑定用户名的状态
      pwd: "",
      pwdState: "",
    };
  },
  methods: {
    checkName() {
      // console.log("用户名:", this.name);
      // 验证用户名 6~15位单词字符
      let exp = /^\w{6,15}$/;
      if (exp.test(this.name)) {
        // 验证通过
        this.nameSate = "success";
        return true;
      } else {
        // 验证失败
        this.nameSate = "error";
        return false;
      }
    },

    // 验证密码
    checkPwd() {
      let exp = /^\d{6}$/;
      if (exp.test(this.pwd)) {
        this.pwdState = "success";
        return true;
      } else {
        this.pwdState = "error";
        return false;
      }
    },

    // 提交验证
    checkFrom() {
      if (this.checkName() && this.checkPwd()) {
        console.log("验证成功,执行登录业务");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>